<!-- 分割线ref,reactive -->
<!-- <script setup lang="ts">
  import { ref, reactive } from 'vue'
  const user1 = ref({name: '恺恺'})
  const user2 = reactive({name: '涛涛'})
  console.log(user1.value.name, user2.name);
</script>
<template>
  <div>{{ user1.name }}</div>
  <div>{{ user2.name }}</div>
  <div><input type="text" v-model="user2.name"></div>
</template>
<style scoped></style> -->

<!-- 分割线v-bind -->
<!-- <script setup lang="ts">
import { ref } from 'vue'
let link = 'https://www.tmall.com'
let myId = 'my-link'
let myCss = ref('linkColor1')
</script>
<template>
  <a :href="link" :id="myId" :class="myCss">点我跳转</a>
  <input type="text" v-model="myCss">
</template>
<style scoped>
.linkColor1 {color: red;}
.linkColor2 {color: green;}
</style> -->

<!-- 分割线v-on -->
<!-- <script setup lang="ts">
  function method1() {
    console.log('onchange');
  }
  function method2() {
    console.log('onerror');
  }
  function method3() {
    console.log('onfocus');
  }
  function method4() {
    console.log('oninput');
  }
  function method5() {
    console.log('onmouseenter');
  }
  function method6() {
    console.log('onmouseleave');
  }
  function method7() {
    console.log('onclick');
  }
</script>

<template> -->
<!-- onchange 当值发生改变触发执行函数
      onerror 当图片加载失败触发执行函数
      onfocus 当输入框获得焦点触发执行函数
      oninput 当输入框内容发生改变触发执行函数
      onmouseenter 当鼠标进入元素区域触发执行函数
      onmouseleave 当鼠标离开元素区域触发执行函数
      onclick 当点击按钮触发执行函数
  -->
<!-- <select v-on:change="method1()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <img v-bind:error="method2()" src="https://img.alicdn.com/tfs/TB1bQJ_XuL2gK0jSZFkXXblCFXa-368-">
  <input @input="method4()" type="text" v-on:focus="method3()">
  <div @mouseenter="method5()" v-on:mouseleave="method6()">内容。。。。。。。。。</div>
  <button v-on:click="method7()">点我</button>
</template>
<style scoped></style> -->
<!-- 分割线 v-if  v-show -->
<!-- .once代表事件只能被调用一次 -->
<!-- <script setup lang="ts">
  import { ref } from 'vue'
  let isShow = ref(1)
  let toggle = (index) => {
    isShow.value = index
    //alert(1=="1") // true//alert(1==="1") // false
  }
</script>
<template>
  <button @click.once="toggle(1)">显示1tab</button>
  <button @click.once="toggle(2)">显示2tab</button>
  <button @click.once="toggle(3)">显示3tab</button>
  <div v-if="isShow === 1">内容1111</div>
  <div v-else-if="isShow === 2">内容222</div>
  <div v-else>内容333</div>
</template>
<style scoped></style> -->

<!-- 分割线v-for -->
<!-- <script setup lang="ts">
import { reactive } from 'vue'
let books = reactive([
  { bookId: 1, bookName: 'vue3', price: 20 },
  { bookId: 2, bookName: 'angular', price: 15 },
  { bookId: 3, bookName: 'react', price: 10 },
  { bookId: 4, bookName: 'java', price: 25 }
]);

let doDelete = (index) => {
  books.splice(index, 1) // 从index位置开始删除1个元素
}

let book = reactive({})
function add() {
  // 往数组中添加数据
  books.push(book)
}
</script>

<template>
  <div>ID:<input type="text" v-model="book.bookId"></div>
  <div>书名:<input type="text" v-model="book.bookName"></div>
  <div>价格:<input type="text" v-model="book.price"></div>
  <button @click="add">添加</button>
  <ul>
    <li>
      <span>序号</span>
      <span>书名</span>
      <span>价格</span>
      <span>操作</span>
    </li>
    <li v-for="(book, index) in books" :key="book.bookId">
      <span>{{ index + 1 }}</span>
      <span>{{ book.bookName }}</span>
      <span>{{ book.price }}</span>
      <span @click="doDelete(index)">删除</span>
    </li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
}
span {
  width: 100px;
  display: inline-block;
}
</style> -->
<!-- 使用element-plus 按钮 -->
<!-- <template>
    <el-button>Default</el-button>
    <el-button type="primary">按钮</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>
<style scoped>
</style> -->

<!-- 走马灯 -->
<script setup lang="ts">

</script>

<template>
  <div class="block text-center">
    <span class="demonstration">
      Switch when indicator is hovered (default)
    </span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block text-center" m="t-4">
    <span class="demonstration">Switch when indicator is clicked</span>
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
